"use client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { usePathname } from "next/navigation";
import { useEffect, useRef, useState } from "react";
export default function Providers({ children }: any) {
  const pathName = usePathname();
  const isRegister = useRef(false);

  function HandleResize() {
    let ele: any = document.documentElement;

    if (window.innerHeight < 900) {
      if (pathName != "/home/help") {
        ele.style.zoom = "93%";
      } else {
        ele.style.zoom = "85%";
      }

      const gmpsFooter = document.getElementById("gmps_footer");
      if (gmpsFooter) {
        gmpsFooter.style.position = "fixed";
        gmpsFooter.style.bottom = "0";
        gmpsFooter.style.width = "100%";
      }
    } else {
      ele.style.zoom = "100%";
      const gmpsFooter = document.getElementById("gmps_footer");

      if (gmpsFooter) {
        gmpsFooter.style.position = "none";
        gmpsFooter.style.bottom = "none";
        gmpsFooter.style.width = "100%";
      }
    }

    document.body.style.opacity = "1";
    document.documentElement.style.opacity = "1";
  }

  useEffect(() => {
    if (!isRegister.current) {
      window.addEventListener("resize", HandleResize);
      isRegister.current = true;
    }
    HandleResize();
  });

  const [queryClient] = useState(
    () =>
      new QueryClient({
        defaultOptions: {
          queries: {
            // With SSR, we usually want to set some default staleTime
            // above 0 to avoid refetching immediately on the client
            staleTime: 60 * 1000,
            retry: false,
          },
        },
      })
  );

  return (
    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
  );
}
